<template>
  <div id="CompanyIntroduction">
    <div class="banner container-fuild text-center">美食特色</div>
    <div class="container">
      <div class="row CompanyIntroduction-container">
        <div style="text-align: center;margin-bottom: 20px">西藏：藏香美食韵，高原风味淳。</div>
      <div style="display: flex;justify-content:space-between;">
        <el-card style="width: 300px;">
          <div>
            <el-image :src="ms1" style="height: 200px;width: 100%;object-fit: cover" fit="cover"/>
          </div>
          <div style="font-size: 18px;color:rgb(137, 53, 53);font-weight: bold;margin: 10px 0">
          糌粑</div>
          <div>
          
糌粑是藏族牧民传统主食之一，它是由青稞经除杂、清洗、晾干、翻炒、磨粉等工艺制成的粉状食物，也被称为青稞炒面。
          </div>
        </el-card>
        <el-card style="width: 300px;">
          <div>
            <el-image :src="ms2" style="height: 200px;width: 100%;object-fit: cover" fit="cover"/>
          </div>
          <div style="font-size: 18px;color:rgb(137, 53, 53);font-weight: bold;margin: 10px 0">酥油茶</div>
          <div>
            酥油茶是藏族的一种传统饮料，多作为主食与糌粑一起食用。
            它由酥油、茶叶、盐和水混合而成，口感独特，具有提神醒脑、抵御寒冷的功效。
          </div>
        </el-card>
        <el-card style="width: 300px;">
          <div>
            <el-image :src="ms3" style="height: 200px;width: 100%;object-fit: cover" fit="cover"/>
          </div>
          <div style="font-size: 18px;color:rgb(137, 53, 53);font-weight: bold;margin: 10px 0">藏式烤全羊</div>
          <div>
           藏式烤全羊是藏族传统美食中极具代表性的佳肴，它蕴含着浓郁的民族文化特色。
          </div>
        </el-card>
      </div>
      <div style="display: flex;justify-content:space-between;margin: 20px 0px">
        <el-card style="width: 300px;">
          <div>
            <el-image :src="ms4" style="height: 200px;width: 100%;object-fit: cover" fit="cover"/>
          </div>
          <div style="font-size: 18px;color:rgb(137, 53, 53);font-weight: bold;margin: 10px 0">西藏酸奶</div>
          <div>
            西藏酸奶是藏族传统美食中的瑰宝，具有独特的风味和丰富的文化内涵。
          </div>
        </el-card>
        <el-card style="width: 300px;">
          <div>
            <el-image :src="ms5" style="height: 200px;width: 100%;object-fit: cover" fit="cover"/>
          </div>
          <div style="font-size: 18px;color:rgb(137, 53, 53);font-weight: bold;margin: 10px 0">牛肉干</div>
          <div>
            西藏牛肉干主要以牦牛肉为原料。牦牛是青藏高原特有的牛种，它们适应了高海拔、严寒、低氧等极端恶劣的环境。
          </div>
        </el-card>
        <el-card style="width: 300px;">
          <div>
            <el-image :src="ms6" style="height: 200px;width: 100%;object-fit: cover" fit="cover"/>
          </div>
          <div style="font-size: 18px;color:rgb(137, 53, 53);font-weight: bold;margin: 10px 0">藏面</div>
          <div>
           藏面是一种极富藏族特色的传统面食，在西藏的饮食文化中占据着重要地位。
          </div>
        </el-card>
      </div>
      <div style="display: flex;justify-content:space-between;">
      
      </div>

      </div>
    </div>
  </div>
</template>

<script setup name="CompanyIntroduction">
import ms1 from '@/assets/img/ms1.jpg';
import ms2 from '@/assets/img/ms2.jpeg';
import ms3 from '@/assets/img/ms3.jpeg';
import ms4 from '@/assets/img/ms4.jpeg';
import ms5 from '@/assets/img/ms5.jpeg';
import ms6 from '@/assets/img/ms6.jpeg';

import WOW from 'wow.js'
import { onMounted } from 'vue'
onMounted(() => {
  var wow = new WOW()
  wow.init()
})
</script>

<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url('../assets/img/banner1.jpeg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.row {
  margin-right: 0;
  margin-left: 0;
}
.CompanyIntroduction-container {
  padding: 100px 0;
  color: #808080;
  transition: all ease 0.5s;
}
.CompanyIntroduction-container > div > p {
  font-size: 14px;
  line-height: 2.5rem;
}
@media screen and (max-width: 997px) {
  .CompanyIntroduction-container {
    padding: 10px 0;
    color: #808080;
  }
}
</style>

